﻿function int_win8(option) {
    var html_format = '<li style="background-image:url({bgUrl});background-color:{bgColor};background-size: {bgSize};width:{width}">'
    + '<span title="{title}">{title}</span>'
    + '<a href="{url}"><div class="{class}"></div></a>'
    + '</li>';
    var html_arr = [];
    for (var i in option.items) {
        html_arr.push(html_format.replace(/{width}/g, option.items[i].width * (option.length + 4) - 4 + 'px')
            .replace(/{bgUrl}/g, option.items[i].bgUrl)
            .replace(/{bgColor}/g, option.items[i].bgColor)
            .replace(/{bgSize}/g, option.bgSize)
            .replace(/{title}/g, option.items[i].title)
            .replace(/{class}/g, option.items[i].class)
            .replace(/{url}/g, option.items[i].url));
    }
    $('.win8-items').append(html_arr.join(''));
}
/******************事 件*******************/
$(document).on('mouseenter', '.win8-items li', function (ev) {
    animate('in', this, getDirection(ev, this));
    console.log('in');
});
$(document).on('mouseleave', '.win8-items li', function (ev) {
    animate('out', this, getDirection(ev, this));
    console.log('out');
});
/******************函 数*******************/
/* 动画函数 */
function animate(style, o, direction) {
    console.log(direction);
    var aObj = $(o).find('div');
    switch (direction) {
        case 'top': {
            if (style == 'in') {
                aObj.css({ 'top': '-100%', 'left': '0px' }).animate({ 'top': '0px' }, option.animateSpeed)
            } else {
                aObj.animate({ 'top': '-100%' }, option.animateSpeed)
            }
        } break;
        case 'right': {
            if (style == 'in') {
                aObj.css({ 'left': '100%', 'top': '0px' }).animate({ 'left': '0px' }, option.animateSpeed)
            } else {
                aObj.animate({ 'left': '100%' }, option.animateSpeed)
            }
        } break;
        case 'bottom': {
            if (style == 'in') {
                aObj.css({ 'top': '100%', 'left': '0px' }).animate({ 'top': '0px' }, option.animateSpeed)
            } else {
                aObj.animate({ 'top': '100%' }, option.animateSpeed)
            }
        } break;
        case 'left': {
            if (style == 'in') {
                aObj.css({ 'left': '-100%', 'top': '0px' }).animate({ 'left': '0px' }, option.animateSpeed)
            } else {
                aObj.animate({ 'left': '-100%' }, option.animateSpeed)
            }
        } break;
    }
}
/* 获取方向 */
function getDirection(ev, obj) {
    var numsObj = {};
    var _point = {
        'top': $(obj).offset().top,
        'left': $(obj).offset().left
    };
    ev = ev || window.event;
    var point = {
        'top': ev.clientY,
        'left': ev.clientX
    };
    numsObj.top = point.top - _point.top;
    numsObj.right = _point.left + $(obj).width() - point.left;
    numsObj.bottom = _point.top + $(obj).height() - point.top;
    numsObj.left = point.left - _point.left;

    var direction = 'left';
    for (var i in numsObj) {
        if (numsObj[i] < numsObj[direction]) {
            direction = i;
        }
    }
    return direction;
}